<template>
  <div class="login">
    <div>
      <el-form :model="form">
        <el-form-item label="账号">
          <el-input prop="username" v-model="form.username" placeholder=“请输入用户名>
          </el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input prop="password" type="password" v-model="form.password" placeholder=“请输入用户名>
          </el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <div style="display: flex">
            <el-input prop="code" type="code" v-model="form.code" placeholder=“请输入验证码>
            </el-input>
            <img style="height: 32px" :src="`data:image/gif;base64,${imageCode}`" @click="getCaptchaImage" />
          </div>
        </el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup lang='ts'>
import axios from 'axios'
import { ref } from 'vue'

const imageCode = ref('')

const form = ref({
  username: 'admin',
  password: 'admin123',
  code: '121',
  uuid: '15e73b37fc104fc2a9cf52bec8085084'
})
const uuid = ref()

const getCaptchaImage = async () => {
  axios.get(`https://vue.ruoyi.vip/prod-api/captchaImage`).then(({ data }) => {
    imageCode.value = data.img
    uuid.value = data.uuid
  })
}

const login = () => {
  axios.post(`https://vue.ruoyi.vip/prod-api/login`)
}
getCaptchaImage()
</script>

<style scoped>
</style>
